{#1.继承base基模板#}
{% extends 'base.html' %}

{#2.bokeh样式模块#}
{% block head %}
    {{ js_resources|safe }}
    {{ css_resources|safe }}
{% endblock %}

{#3.左侧菜单栏#}
{% block sidebar %}
    <ul class="nav nav-sidebar">
        <li><a href="{{ url_for('mpg_view') }}">bokeh_MPG</a></li>
        <li class="active"><a href="{{ url_for('vbar') }}">Vbar</a></li>
        <li><a href="{{ url_for('charts_map') }}">Map<span class="sr-only">(current)</span></a></li>
        <li><a href="#">Export</a></li>
    </ul>
    <ul class="nav nav-sidebar">
        <li><a href="">Nav item</a></li>
        <li><a href="">Nav item again</a></li>
        <li><a href="">One more nav</a></li>
        <li><a href="">Another nav item</a></li>
        <li><a href="">More navigation</a></li>
    </ul>
    <ul class="nav nav-sidebar">
        <li><a href="">Nav item again</a></li>
        <li><a href="">One more nav</a></li>
        <li><a href="">Another nav item</a></li>
    </ul>
{% endblock %}

{#4.bokeh样式模块#}
{% block plot %}
    {{ plot_script|safe }}
    {{ plot_div|safe }}
{% endblock %}

{#5.右侧表格区#}
{% block table %}
<table  class="table table-striped">
    <tr>
        {% for title in the_titles %}
            <th>{{title}}</th>
        {% endfor %}
    </tr>
    {% for content in the_contents %}
        <tr>
            {% for item in content %}
                <td>{{item}}</td>
            {% endfor %}
        </tr>
    {% endfor %}
</table>

{% endblock %}
